<template>
    <div class="setname">
        <div class="head space-between padding-24 bg-active">
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="title color-f fs-36">{{title}}</div>
            <p class="color-f fs-32" :class="{noedit:noedit==true}" @click="save">保存</p>
        </div>
        <div class="content bg-f padding-24 space-between">
            <input type="text" maxlength="15" v-model="name" @input="toedit" placeholder="请输入昵称">
            <img :src="del" alt="" v-if="name!=''" @click="name=''">
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            back:require('../../assets/index/back.png'),
            title:'修改昵称',
            del:require('../../assets/account/del.png'),
            name:'',
            bename:'昵称',
            noedit:true,
        }
    },
    created(){
        this.getuserinfo()
        if(this.bename==this.name){
            this.noedit=true
        }else{
            this.noedit=false
        }
    },
    updated(){
        if(this.bename==this.name){
            this.noedit=true
        }else{
            this.noedit=false
        }
    },
    methods:{
        getuserinfo() {
            var url = this.$host1 + `home/getPersonalMsg`;
            this.$axios.get(url).then(res => {
                console.log(res);
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.bename=resData.data.nickname
                        this.name=resData.data.nickname
                    } else if (resData.code == 0) {
                        // this.$router.push('/login');
                    } else {
                        this.AlertWin(resData.message);
                    }
                }
            })
            .catch(() => {
            this.AlertWin("网络错误！请稍后重试！");
            });
        },
        // 修改信息
        setuserinfo(){
            var data={
                // user_avator:this.userinfo.user_avator,
                // background_photo:this.userinfo.background_photo,
                 nickname:this.name
                // sex:this.userinfo.sex,
                // birthday:this.userinfo.birthday,
                // region:this.userinfo.region,
                // write_name
            }
            var url = this.$host1 + `home/editProfile`
            this.$axios.post(url,data).then(res => {
                console.log(res);
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.AlertWin("修改成功");
                        this.$router.go(-1);
                        //this.userinfo=resData.data
                    }else {
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        goBack(){
            this.$router.go(-1);
        },
        toedit(){
            if(this.bename==this.name){
                this.noedit=true
            }else{
                this.noedit=false
            }
        },
        save(){
            if(this.noedit==true){
                return
            }else if(this.name==''){
                this.AlertWin('昵称不能为空！');
            }else{
                this.setuserinfo()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.setname{
    .head{
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                width: 100%;
            }
        }
        .noedit{
            opacity: 0.5;
        }
    }
    .content{
        //margin-top: 1rem;
        height: 1rem;
        border-bottom: 0.01rem solid #e9e9e9;
        input{
            width: 100%;
            height: 0.8rem;
            font-size: 0.32rem
            //background-color: pink
        }
        img{
            width: 0.3rem;
            height: 0.3rem;
        }
    }

}
</style>
